<template>
    <d2-container class="warning-header">

        <el-card>
            <el-row :gutter="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="建筑名称" style="padding-left: 30px">
                        <el-input v-model="formInline.buildingName" placeholder="" style="width:140px">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="建筑类型" style="padding-left: 30px">
                        <el-select v-model="formInline.buildingtype" placeholder="请选择建筑类型" style="width:180px">
                            <el-option label="居住" value="0"></el-option>
                            <el-option label="商业" value="1"></el-option>
                            <el-option label="仓库" value="2"></el-option>
                            <el-option label="工厂" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="padding-left: 40px">
                        <el-button size="mini" round icon="el-icon-search" @click="onSubmitSearch" type="primary">
                            搜索
                        </el-button>
                        <el-button size="mini" round type="primary" @click="handleNew">
                            创建建筑
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>

        </el-card>
        <br/>

        <el-card>
            <el-table
                    :data="tableData.data"
                    :stripe="true"
                    :border="true"
                    tooltip-effect="dark"
                    style="width: 100%">
                <el-table-column prop="buildingName" label="建筑名称" align="center">
                </el-table-column>
                <el-table-column prop="address" label="地址" align="center">
                </el-table-column>
                <el-table-column prop="floorLow" label="最低楼层" align="center">
                </el-table-column>
                <el-table-column prop="floorHigh" label="最高楼层" align="center">
                </el-table-column>
                <el-table-column prop="buildingtype" label="建筑类型" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.buildingtype ==0"  >居住</span>
                        <span v-if="scope.row.buildingtype ==1"  >商业</span>
                        <span v-if="scope.row.buildingtype ==2"  >仓库</span>
                        <span v-if="scope.row.buildingtype ==3"  >工厂</span>
                    </template>
                </el-table-column>
                <el-table-column prop="imageurl" label="建筑图片" align="center">
                </el-table-column>
                <el-table-column prop="lng" label="经度" align="center">
                </el-table-column>
                <el-table-column prop="lat" label="纬度" align="center">
                </el-table-column>
                <el-table-column label="操作" width="340px" align="center">
                    <template slot-scope="scope">
                        <el-button @click="editMessage(scope.$index,scope.row)" size="mini" round
                                   icon="el-icon-edit" align="center" type="primary">编辑
                        </el-button>
                        <el-button @click="handleClick(scope.$index,scope.row)" size="mini" round
                                   icon="el-icon-edit" align="center" type="primary">巡查点
                        </el-button>
                        <el-button @click="handleDelete(scope.$index,scope.row)" size="mini" round
                                   icon="el-icon-delete" align="center" type="danger">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!--分页操作 -->

        <template slot="footer">
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"

                        layout="prev, pager, next, jumper"
                        :total="tableData.total">
                </el-pagination>
            </div>
        </template>
        <!-- 编辑弹出处理页面-->
        <el-dialog
                title="创建建筑"
                :visible.sync="editFormVisible"
                width="35%"
                :before-close="handleClose">
            <el-card>
                <el-form :inline="true" :model="detailData" class="demo-form-inline" ref="detailData">
                    <el-form-item label="建筑名称" prop="buildingName">
                        <el-input v-model="detailData.buildingName" style="width: 180px" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="建筑类型" prop="projectName">
                        <el-select v-model="detailData.buildingtype" placeholder="居住" style="width:180px">
                            <el-option label="居住" value="0"></el-option>
                            <el-option label="商业" value="1"></el-option>
                            <el-option label="仓库" value="2"></el-option>
                            <el-option label="工厂" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="最低楼层" prop="floorLow">
                        <el-input v-model="detailData.floorLow" style="width: 180px" auto-complete="off"
                                  placeholder="请输入最低楼层"></el-input>
                    </el-form-item>
                    <el-form-item label="最高楼层" prop="floorHigh">
                        <el-input v-model="detailData.floorHigh" style="width: 180px" auto-complete="off"
                                  placeholder="请输入最高楼层"></el-input>
                    </el-form-item>
                    <el-form-item label="国家" prop="country">
                        <el-select v-model="detailData.country" placeholder="请选择国家"
                                   style="width:180px;padding-left: 28px;">
                            <el-option label="请选择国家" value="0"></el-option>
                            <el-option label="中国" value="1"></el-option>
                            <el-option label="日本" value="2"></el-option>
                            <el-option label="非洲" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="省名"  >
                        <el-select v-model="detailData.province" @change="handleProvinceSelect"
                                   placeholder="请选择省" style="width:180px;padding-left: 25px;">
                            <el-option v-for="(item,index) in provices" :key="index" :label="item.name"
                                       :value="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="市名" >
                        <el-select v-model="detailData.city" @change="handleCitySelect" placeholder="请选择市"
                                   style="width:180px;padding-left: 28px;">
                            <el-option v-for="(item,index) in citys " :key="index" :label="item.name"
                                       :value="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="区名"  >
                        <el-select v-model="detailData.zone" placeholder="请选择县/区"
                                   style="width: 180px; padding-left: 25px;">
                            <el-option v-for="(item,index) in districts " :key="index" :label="item.name"
                                       :value="item.name"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="经度" prop="lng">
                        <el-input v-model="detailData.lng" style="width: 180px;padding-left: 28px;"
                                  auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="纬度" prop="lat"  >
                        <el-input v-model="detailData.lat"   style="width: 180px; padding-left: 25px;"
                                  auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="地址" prop="address">
                        <el-input v-model="detailData.address" style="width: 180px;padding-left: 28px;"
                                  auto-complete="off" placeholder="只需要填写街道（村）、道路、门牌"></el-input>
                    </el-form-item>
                    <el-form-item label="建筑图片" prop="img"  >


                        <el-upload :show-file-list="false" action="http://solar.hzcando.com/api/v1/building/" :auto-upload="false" ref="upload">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>

                        <el-button size="small" type="primary">点击查看</el-button>

                    </el-form-item>

                </el-form>
            </el-card>
            <span slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="saveProject('detailData')" style="text-align: center">保存</el-button>
                    <el-button style="text-align: center" @click="editFormVisible = false">取消</el-button>
            </span>
        </el-dialog>

        <!--点击巡查点弹窗-->
        <el-dialog
                title="管理巡查点"
                :visible.sync="editFormVisible1"
                width="80%"
                :before-close="handleClose1">
            <el-card>
                <el-form :inline="true" :model="managementData" class="demo-form-inline" ref="managementData">
                    <el-form-item label="序号" prop="seqno">
                        <el-input v-model="managementData.seqno" auto-complete="off" style="width:240px"
                                  placeholder="请输入巡查点名称"></el-input>
                    </el-form-item>
                    <el-form-item label="巡查点名称" prop="placeName">
                        <el-input v-model="managementData.placeName" auto-complete="off" style="width:240px"
                                  placeholder="请输入巡查点名称"></el-input>
                    </el-form-item>
                    <el-form-item label="责任人" prop="duty">
                        <el-input v-model="managementData.duty" auto-complete="off"
                                  style="width:240px;padding-left: 5px"
                                  placeholder="请选择责任人"></el-input>
                    </el-form-item>
                    <el-form-item label="所属楼层" prop="floor">
                        <el-input v-model="managementData.floor" auto-complete="off"
                                  style="width:240px;padding-left: 15px"
                                  placeholder="请输入楼层"></el-input>
                    </el-form-item>
                    <el-form-item label="二维码" prop="RFID">
                        <el-input v-model="managementData.RFID" auto-complete="off" style="width:240px"
                                  placeholder="请输入二维码"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="saveData('managementData')" size="mini" style="margin-left: 30px">
                        保存
                    </el-button>
                    <el-button size="mini" @click="resetForm('managementData')">重置</el-button>
                </el-form>
            </el-card>
            <br/>
            <el-card>
                <el-table
                        :data="tablePatrolData.data"
                        :stripe="true"
                        :border="true"
                        tooltip-effect="dark">
                    <el-table-column prop="seqno" type="index" width="50" label="序号" align="center">
                    </el-table-column>
                    <el-table-column prop="placeName" label="巡查点名称" align="center" width="100">
                    </el-table-column>
                    <el-table-column prop="duty" label="责任人" align="center">
                    </el-table-column>
                    <el-table-column prop="floor" label="楼层" align="center">
                    </el-table-column>
                    <el-table-column prop="RFID" label="二维码" align="center">
                    </el-table-column>
                    <el-table-column label="操作" width="400px" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button @click="editPatrol(scope.$index,scope.row)" size="mini" round
                                       icon="el-icon-edit">编辑
                            </el-button>
                            <el-button @click="patrolItems(scope.$index,scope.row)" size="mini" round
                                       icon="el-icon-edit" style="margin-left: 5px">巡查项
                            </el-button>
                            <el-button @click="patrolDelete(scope.$index,scope.row)" size="mini" round
                                       icon="el-icon-delete" type="danger">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <template slot="footer">
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange1"
                            @current-change="handleCurrentChange1"
                            :current-page.sync="currentPage1"
                            layout="prev, pager, next, jumper"
                            :total="tablePatrolData.total"
                            class="footer1"
                    >
                    </el-pagination>
                </div>
            </template>
            <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" type="primary"
                               @click="editFormVisible1 = false">关闭</el-button>
                </span>
        </el-dialog>
        <!--点击巡查项按钮弹框-->
        <el-dialog
                title="选择巡查项"
                :visible.sync="editFormVisible2"
                width="40%"
                :before-close="handleClose2">

            <el-card   >
                <el-transfer v-model="choosedInspectItems"
                             :data="listItems"
                             :props="{
                                key: 'Id',
                                label: 'inspectItem' }"
                             filterable
                             @change="handlerChoosedInspectItems "

                             filter-placeholder="请输入搜索关键词"
                             :titles="['巡查项列表', '已选巡查项']"
                ></el-transfer>
            </el-card>

        </el-dialog>

    </d2-container>
</template>
<script>

    import {
        getBuildingList, submitBuilding, getPatrolTable,
        deletePatrol, submitInspectplace, deleteBuilding,
        getInspectItems, getListItems,addInspectItems} from "../../api/data/patrolConfig/index";
    import {getProvinceList} from "../../api/data/projectManagement/index";
    import {mapState} from 'vuex'

    export default {
        mounted() {
            this.handlePlaceSelect('province', '中国');
            this.handleWarningTable();

        },
        watch: {
            porjectNode5: function (newnode, oldnode) {
                console.log('projectnode', newnode);
                this.project = newnode;
                this.project.projectNo = newnode.dataId;
                this.handleWarningTable(this.project, 1)
            }
        },
        computed: {
            ...mapState('d2admin/projectSelect', [
                'porjectNode5'
            ])
        },
        data() {

            return {
                place:{},
                activeNames: ['1'],
                listItems: [],
                choosedInspectItems: [],
                project: null,
                provices: [],
                citys: [],
                districts: [],
                currentPage: 1,
                currentPage1: 1,
                building:{},
                formInline: {
                    buildingName: '',
                    buildingtype: ''
                },
                detailData: {
                    buildingName: '',
                    buildingtype: '',
                    floorLow: '',
                    floorHigh: '',
                    province: '',
                    city: '',
                    zone: '',
                    address: '',
                    img: '',
                    imageurl: '',
                    lng: '',
                    lat: '',

                },
                inspectItemData:{
                    inspectItem:[],
                },
                managementData: {
                    seqno: '',
                    placeName: '',
                    duty: '',
                    floor: '',
                    RFID: '',
                },
                tableData: [],
                tablePatrolData: [],
                editFormVisible: false,
                editFormVisible1: false,
                editFormVisible2: false,
                activeName: '1',

            }
        },
        methods: {
            //巡查项搜索关键词
            handleListItems() {
                var data =  { pagesize: 200};
                getInspectItems(data).then(res => {
                    this.listItems = res.data;
                })

            },
            handleWarningTable(data = {}, pageno) {
                data = Object.assign(data, {pageno: pageno, pagesize: 10});
                getBuildingList(data).then(res => {
                    this.tableData = res;
                })

            },
            //省市区级联
            handlePlaceSelect(level, parentName) {
                getProvinceList(level, parentName).then(res => {
                    switch (level) {
                        case 'province':
                            this.provices = res.data;
                            break;
                        case 'city':
                            this.citys = res.data;
                            break;
                        case 'district':
                            this.districts = res.data;
                            break
                    }

                });
            },
            handleProvinceSelect(value) {
                this.handlePlaceSelect('city', value);
            },
            handleCitySelect(value) {
                this.handlePlaceSelect('district', value);
            },
            handleNew: function (index, row) {
                if (this.project === null) {
                    this.$message({
                        message: '请选择一个项目！',
                        type: 'warning'
                    });
                } else {
                    this.editFormVisible = true;
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleSizeChange1(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.handleWarningTable(this.project, val)
            },
            handleCurrentChange1(val) {
                console.log(`当前页: ${val}`);
                this.handleDeviceTable(this.project, val)
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            handleClose1(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            handleClose2(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            onSubmitSearch() {
                //this.formInline.projectNo=this.project.projectNo;
                //this.project =  Object.assign(this.project, this.formInline);
                var data = Object.assign(this.project, this.formInline);
                this.handleWarningTable(data, 1)
            },
            //编辑按钮
            editMessage: function (index, row) {
                this.editFormVisible = true;
                this.detailData = Object.assign({}, row, {userId: {}});
            },
            //巡查项

            handchoosedInspectItems(placeId){
                var data =  { placeId: placeId};
                getListItems(data).then(res => {
                    this.choosedInspectItems = []
                    for(var item of res.data){
                        this.choosedInspectItems.push(item.inspectId)
                    }
                })
            },
            //巡查点按钮
            handleClick: function (index, row) {
                this.editFormVisible1 = true;
                this.building = row

                this.handlePatrolTable({},1,row.Id)
            },
            //巡查项按钮
            patrolItems: function (index, row) {
                this.editFormVisible2 = true;
                this.handleListItems();
                this.handchoosedInspectItems(row.Id);
                this.place = row

            },
             handlerChoosedInspectItems(value, direction, movedKeys){

                 console.log(value.join(','))

                 addInspectItems(value.join(',')?value.join(','):'',this.place.Id).then(res => {
                     if (res.state === 0) {
                         this.$message({
                             message: '保存成功！',
                             type: 'success'
                         });
                     }
                 })
             },
            //创建建筑保存按钮
            saveProject(detailData) {
                this.$refs[detailData].validate((valid) => {
                    if (valid) {
                        this.detailData.projectNo = this.project.projectNo;
                        submitBuilding(this.detailData).then(res => {
                            if (res.state === 0) {
                                this.$message({
                                    message: '保存成功！',
                                    type: 'success'
                                });
                                //上传图片
                                this.$refs.upload.submit();
                                this.editFormVisible = false;
                                this.handleWarningTable(this.project, 1);
                                this.$refs[detailData].resetFields();
                            }
                        })

                    } else {
                        this.$message({
                            message: '保存失败！',
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            //管理巡查点保存
            saveData(managementData) {
                this.$refs[managementData].validate((valid) => {
                    if (valid) {
                        var data = this.managementData
                        data.buildingId = this.building.Id
                        submitInspectplace(data).then(res => {
                            if (res.state === 0) {
                                this.$message({
                                    message: '提交成功！',
                                    type: 'success'
                                });
                                this.editFormVisible = false;
                                this.handlePatrolTable({}, this.currentPage1,this.building.Id);
                                this.$refs[managementData].resetFields();
                            }
                        })

                    } else {
                        this.$message({
                            message: '提交失败！',
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            //重置按钮
            resetForm(managementData) {
                this.$refs[managementData].resetFields();
            },
            // 获取巡查点数据
            handlePatrolTable(data = {}, pageno,buildingId) {
                data = Object.assign(data, {pageno: pageno, pagesize: 5, buildingId: buildingId});
                getPatrolTable(data).then(res => {
                    this.tablePatrolData = res;
                })
            },
            //巡查点编辑
            editPatrol: function (index, data) {
                this.editFormVisible1 = true;
                console.log(data);
                this.managementData = data;
            },
            //表格删除
            handleDelete: function (index, row) {
                this.$confirm('此操作将永久删除项数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteBuilding(row).then(res => {
                        if (res.state === 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.handleWarningTable(this.project, this.currentPage)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //diango删除按钮
            patrolDelete: function (index, row) {
                this.$confirm('此操作将永久删除项数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deletePatrol(row).then(res => {
                        if (res.state === 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.handlePatrolTable(this.project, this.currentPage1)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSelect(item) {
                console.log(item);
            },
            handleChange(val) {
                console.log(val);
            }
        }
    }
</script>
<style>
    .warning-header .d2-container-full__header {
        background: gainsboro !important;
    }

    .warning-header .d2-container-full__header {
        background: #1E9FFF !important;

    }

    .el-form-item__content {
        text-align: center;
    }

    .el-button {
        padding: 10px 20px;
        margin-right: 5px;
    }

    .el-form-item__label {
        margin-left: 5px;
    }

    .number1 {
        padding-left: 0px;
    }


</style>

